<template>
  <div>
    <h4 style="color: red" align="center">*注意默认只查询当天检查数据,如果要查询其他的,请选择范围查询*</h4>
    <el-tabs value="first" class="center-tabs" :stretch="true">

      <el-tab-pane label="药品销售列表" name="first">
        <div class="app-container">
          <!--搜索框-->
          <el-form :model="queryParams2" ref="queryForm1" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="药品名称" prop="drugName">
              <el-input
                v-model="queryParams2.drugName"
                placeholder="请输入药品名称"
                clearable
                size="small"
                style="width: 240px"
                @keyup.enter.native="handleQuery2"
              />
            </el-form-item>
            <el-form-item label="交易时间">
              <el-date-picker
                v-model="queryParams2.createTime"
                size="small"
                style="width: 240px"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery2">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery2">重置</el-button>
            </el-form-item>
          </el-form>
          <el-row :gutter="24">
            <!--用户数据-->
            <el-col :span="24" :xs="24">
              <el-table v-loading="false" :data="listWorks1" border >
                <el-table-column label="药品ID" align="center" key="drugId" prop="drugId"  />
                <el-table-column label="药品名称" align="center" key="drugName" prop="drugName"   />
                <el-table-column label="药品价格" align="center" key="drugReserve" prop="drugReserve"  />
                <el-table-column label="交易数量" align="center" key="warnValue" prop="warnValue"  />
                <el-table-column label="交易总价" align="center" key="facId" prop="facId" :formatter="facFormat" />
                <el-table-column label="创建时间" align="center" prop="createTime"  width="160">
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>

          </el-row>
          <pagination
            v-show="total1>0"
            :total="total1"
            :page.sync="queryParams1.pageNum"
            :limit.sync="queryParams1.pageSize"
            @pagination="getList1"
          />
        </div>

      </el-tab-pane>
      <el-tab-pane label="药品销售统计列表" name="second">
        <div class="app-container">
          <el-row :gutter="24">
            <!--用户数据-->
            <el-col :span="24" :xs="24">
              <!--搜索框-->
              <el-form :model="queryParams2" ref="queryForm1" :inline="true" v-show="showSearch" label-width="68px">
                <el-form-item label="药品名称" prop="drugName">
                  <el-input
                    v-model="queryParams2.drugName"
                    placeholder="请输入药品名称"
                    clearable
                    size="small"
                    style="width: 240px"
                    @keyup.enter.native="handleQuery2"
                  />
                </el-form-item>
                <el-form-item label="交易时间">
                  <el-date-picker
                    v-model="queryParams2.createTime"
                    size="small"
                    style="width: 240px"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery2">搜索</el-button>
                  <el-button icon="el-icon-refresh" size="mini" @click="resetQuery2">重置</el-button>
                </el-form-item>
              </el-form>
              <el-table v-loading="false" :data="listWorks2" border >
                <el-table-column label="药品ID" align="center" key="drug.drugId" prop="drug.drugId"  />
                <el-table-column label="药品名称" align="center" key="drug.drugName" prop="drug.drugName"   />
                <el-table-column label="交易总金额" align="center" key="medNum" prop="medNum"   />
                <el-table-column label="交易总数" align="center" key="medPrice" prop="medPrice"   />
              </el-table>
            </el-col>
          </el-row>
          <pagination
            v-show="total2>0"
            :total="total2"
            :page.sync="queryParams2.pageNum"
            :limit.sync="queryParams2.pageSize"
            @pagination="getList1"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
    //import { listBatch} from "@/api/invoicing/inventory";
   // import { listDrug,listFacName,listPres,listDrugType} from "@/api/data/drug";
    import Treeselect from "@riophae/vue-treeselect";
    //import "@riophae/vue-treeselect/dist/vue-treeselect.css";

    export default {
        name: "User",
        components: { Treeselect },
        data() {
            return {
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total1: 0,
                total2: 0,
                // 用户表格数据
                listWorks1: null,
                listWorks2: null,
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 部门名称
                deptName: undefined,
                // 日期范围
                dateRange: [],
                dateRange1: [],
                // 状态数据字典
                statusOptions: [],
                // 厂名字典
                facOptions: [],
                //生产厂家集合
                facNameOptions:[],
                //处方集合
                PresOptions: [],
                //药品类型集合
                DrugTypeOptions:[],
                // 查询参数
                queryParams1: {
                    pageNum: 1,
                    pageSize: 10,
                    drugName: undefined,
                    drugType:undefined,
                    facId:undefined,
                    drugPresType:undefined,

                },
                // 查询参数
                queryParams2: {
                    pageNum: 1,
                    pageSize: 10,
                    billId:undefined,
                    drugName: undefined,
                    drugType: undefined,
                    facId:undefined,
                    presType:undefined,
                    createTime:undefined
                },
            };
        },
        created() {
            this.getList1();
            this.getList2();
            this.getFacName();
            this.getDrugType();
            this.getPres();
        },
        methods: {
            /*查询药品类型列表*/
            getDrugType(){
                listDrugType().then(resp=>{
                    this.DrugTypeOptions=resp.data;
                })
            },
            /*查询处方列表*/
            getPres(){
                listPres().then(resp=>{
                    this.PresOptions=resp.data;
                })
            },
            /*查询生产厂家列表*/
            getFacName(){
                listFacName().then(resp =>{
                    this.facNameOptions=resp.data;
                    this.facOptions=resp.data;

                });
            },
            // 厂家名称字典翻译A
            facFormat2(row,column) {
                for (var i in this.facOptions){
                    if (this.facOptions[i].facId===row.drug.facId){
                        console.log(this.facOptions[i].facName);
                        return this.facOptions[i].facName;
                    }
                }
            },
            // 厂家名称字典翻译B
            facFormat(row,column) {
                for (var i in this.facOptions){
                    if (this.facOptions[i].facId===row.facId){
                        console.log(this.facOptions[i].facName);
                        return this.facOptions[i].facName;
                    }
                }
            },
            /** 查询药品库存列表 */
            getList1() {
                this.loading = true;
                listDrug(this.queryParams1).then(response => {
                        this.listWorks1 = response.rows;
                        this.total1=response.total;
                        this.loading = false;
                    }
                );
            },
            getList2() {
                this.loading = true;
                listBatch(this.queryParams2).then(response => {
                        this.listWorks2 = response.rows;
                        this.total2=response.total;
                        this.loading = false;
                    }
                );
            },
            /** 搜索按钮操作 */
            handleQuery1() {
                this.getList1();
            },
            handleQuery2() {
                this.getList2();
            },
            /** 重置按钮操作 */
            resetQuery1() {
                this.dateRange = [];
                this.resetForm("queryForm");
                this.handleQuery();
            },
            resetQuery2() {
                this.dateRange1 = [];
                this.resetForm("queryForm1");
                this.handleQuery1();
            },
            reRenderTable() {
                this.$nextTick(()=>{
                    this.$refs.table.doLayout()
                })
            }
        }
    };
</script>
